<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field['options'].displayStyle"
  >
    <div class="scene-waiting-drugstore-patient-widget">
      <div class="widget-inside" :style="getStyle('area')">
        <div class="flex-box">
          <div class="flex-box-left item queue-area">
            <div
                :style="getStyle('head')"
                class="header-area"
            >
              <template v-for="(item) in (optionsInfo.queueInfo.colOptions)">
                <div class="item" :class="getClassName(item.value)" v-if="getColShow(item.value)"
                     :style="setFlex(item,'head')">
                  {{ item.label }}
                </div>
              </template>
            </div>
            <div
                class="list-area"
                :style="getStyle('list')"
                :class="{'queue-scrooll': queueScroll,'queue-no-scrooll': !queueScroll}"
            >
              <template v-if="queueScroll">
                <vue-seamless-scroll
                    class="scroll"
                    :ref="`scroll`"
                    :key="widgetKey"
                    :classOption="queueOption"
                    :data="waitPatientListFlatten"
                >
                  <template v-for="(item,index) in (waitingPatientInfos)">
                    <div class="waiting-item">
                      <template v-for="(items) in (optionsInfo.queueInfo.colOptions)">
                        <template v-if="getColShow(items.value)">
                          <div class="item" :class="getClassName(items.value)" :style="setFlex(items,'list')">
                            <template v-if="(items.value!=='treatingPatient')&&(items.value!=='waitPatientList')">
                              <div class="item-inside-default" :class="{'item-inside':(optionsInfo.itemShadow)}">
                                <!--人数-->
                                <template
                                    v-if="(items.value==='waitPatientCount') || (items.value==='treatmentRoomNumber')">
                                  <div class="scroll-item-inside">
                                    {{ item[items.value] || '\u00a0' }}
                                  </div>
                                </template>
                                <!--除了人数-->
                                <template v-else>
                                  <div :data-value="item[items.value]"
                                       :class="`${items.value}-wrap-info`">
                                    <template v-if="(items.value==='registerObjNames')">
                                      <ScrollX
                                          :key="`${item[items.value]}-${index}}`"
                                          :speed="optionsInfo['listSpeed'] >15? 15:optionsInfo['listSpeed']"
                                      >
                                        {{ getColContent(item, (items.value)) }}
                                      </ScrollX>
                                    </template>
                                    <template v-if="(items.value!=='registerObjNames')">
                                      <ScrollX
                                          :key="`${item[items.value]}-${index}}`"
                                          :speed="optionsInfo['listSpeed'] >15? 15:optionsInfo['listSpeed']"
                                      >
                                        {{ getColContent(item, (items.value)) }}
                                      </ScrollX>
                                    </template>
                                  </div>
                                </template>
                              </div>
                            </template>
                            <template v-if="items.value==='treatingPatient'">
                      <span class="treating-patient-area">
                        <ScrollEditX :content="getCurrentPatient(item) || ''" :key="`${item[items.value]}`"/>
                      </span>
                            </template>
                            <template v-if="items.value==='waitPatientList'">
                              <template v-if="(optionsInfo.openScroll)">
                                <vue-seamless-scroll
                                    :ref="`scroll-${item.workerId}`"
                                    class="scroll"
                                    :key="widgetKey"
                                    @ScrollEnd="(e)=>handleScrollEnd(e, item)"
                                    :class-option="waitPatienOption"
                                    :data="item.waitPatientList"
                                >
                                  <div class="inside-content" :class="{'patient_space':optionsInfo['patientSpace']}">
                                <span class="patient"
                                      v-for="(item,index) in (item.waitPatientList)"
                                      :key="`${(item.queuingId) || index}-${(item.patientIdNo) || index}`"
                                      v-html="getWaitingContent(item)"
                                />
                                  </div>
                                </vue-seamless-scroll>
                              </template>
                              <template v-else>
                                <div class="no-scroll">
                                  <div class="inside-content">
                                <span class="patient"
                                      v-for="(item,index) in (item.waitPatientList)"
                                      v-html="getWaitingContent(item)"
                                      :key="`${(item.queuingId) || index}-${(item.patientIdNo) || index}-${index}`"
                                />
                                  </div>
                                </div>
                              </template>
                            </template>
                          </div>
                        </template>
                      </template>
                    </div>
                  </template>
                </vue-seamless-scroll>
              </template>
              <template v-else>
                <template v-for="(item,index) in (waitingPatientInfos)">
                  <div class="waiting-item">
                    <template v-for="(items) in (optionsInfo.queueInfo.colOptions)">
                      <template v-if="getColShow(items.value)">
                        <div class="item" :class="getClassName(items.value)" :style="setFlex(items,'list')">
                          <template v-if="(items.value!=='treatingPatient')&&(items.value!=='waitPatientList')">
                            <div class="item-inside-default" :class="{'item-inside':(optionsInfo.itemShadow)}">
                              <!--人数-->
                              <template
                                  v-if="(items.value==='waitPatientCount') || (items.value==='treatmentRoomNumber')">
                                <div class="scroll-item-inside">
                                  {{ item[items.value] || '\u00a0' }}
                                </div>
                              </template>
                              <!--除了人数-->
                              <template v-else>
                                <div :data-value="item[items.value]"
                                     :class="`${items.value}-wrap-info`">
                                  <template v-if="(items.value==='registerObjNames')">
                                    <ScrollX
                                        :key="`${item[items.value]}-${index}}`"
                                        :speed="optionsInfo['listSpeed'] >15? 15:optionsInfo['listSpeed']"
                                    >
                                      {{ getColContent(item, (items.value)) }}
                                    </ScrollX>
                                  </template>
                                  <template v-if="(items.value!=='registerObjNames')">
                                    <ScrollX
                                        :key="`${item[items.value]}-${index}}`"
                                        :speed="optionsInfo['listSpeed'] >15? 15:optionsInfo['listSpeed']"
                                    >
                                      {{ getColContent(item, (items.value)) }}
                                    </ScrollX>
                                  </template>
                                </div>
                              </template>
                            </div>
                          </template>
                          <template v-if="items.value==='treatingPatient'">
                      <span class="treating-patient-area">
                        <ScrollEditX :content="getCurrentPatient(item) || ''" :key="`${item[items.value]}`"/>
                      </span>
                          </template>
                          <template v-if="items.value==='waitPatientList'">
                            <template v-if="(optionsInfo.openScroll)">
                              <vue-seamless-scroll
                                  :ref="`scroll-${item.workerId}`"
                                  class="scroll"
                                  :key="widgetKey"
                                  @ScrollEnd="(e)=>handleScrollEnd(e, item)"
                                  :class-option="waitPatienOption"
                                  :data="item.waitPatientList"
                              >
                                <div class="inside-content" :class="{'patient_space':optionsInfo['patientSpace']}">
                                <span class="patient"
                                      v-for="(item,index) in (item.waitPatientList)"
                                      :key="`${(item.queuingId) || index}-${(item.patientIdNo) || index}`"
                                      v-html="getWaitingContent(item)"
                                />
                                </div>
                              </vue-seamless-scroll>
                            </template>
                            <template v-else>
                              <div class="no-scroll">
                                <div class="inside-content">
                                <span class="patient"
                                      v-for="(item,index) in (item.waitPatientList)"
                                      v-html="getWaitingContent(item)"
                                      :key="`${(item.queuingId) || index}-${(item.patientIdNo) || index}-${index}`"
                                />
                                </div>
                              </div>
                            </template>
                          </template>
                        </div>
                      </template>
                    </template>
                  </div>
                </template>
              </template>
            </div>
          </div>
          <div class="flex-box-right item wait-area">
            <div class="header-area" :style="getStyle('patientHead')">
              <div class="header-item">{{ optionsInfo?.patientInfo?.header || '候诊患者' }}</div>
            </div>
            <div
                class="content-area"
                :style="getStyle('patientList')"
                :class="{
                  'patientInfo-scrooll': optionsInfo?.patientInfo?.scroll,
                  'patientInfo-no-scrooll': !(optionsInfo?.patientInfo?.scroll)
                }"
            >
              <template v-if="patientListScroll">
                <vue-seamless-scroll
                    v-if="true"
                    class="scroll"
                    :ref="`scroll`"
                    :key="widgetKey"
                    :classOption="scrollOption"
                    :data="waitPatientListFlatten"
                >
                  <div class="scroll-inside">
                    <template v-for="groupItem in waitingPatientSummaryInfos">
                      <div class="group-info">
                        <template v-for="chunk in groupItem">
                          <div class="patient-item">
                            {{ chunk?.orderNo || ' ' }} {{ chunk?.patientName || ' ' }}
                          </div>
                        </template>
                      </div>
                    </template>
                  </div>
                </vue-seamless-scroll>
              </template>
              <template v-else>
                <div class="scroll-inside">
                  <template v-for="groupItem in waitingPatientSummaryInfos">
                    <div class="group-info">
                      <template v-for="chunk in groupItem">
                        <div class="patient-item">
                          {{ chunk?.orderNo || ' ' }} {{ chunk?.patientName || ' ' }}
                        </div>
                      </template>
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {v4 as uuid} from 'uuid'
import {pxToVw} from '@/utils/common';
import emitter from "@/utils/designer/emitter";
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue'
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import {buildParentApi} from "@/utils/designer/util";
import vueSeamlessScroll from 'vue-seamless-scroll'
import ScrollEditX from "@c/public/seamlessScroll/ScrollEditX.vue";

let buildParent = buildParentApi();
export default {
  name: "scene-waiting-drugstore-patient-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollEditX,
    CompOperate,
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
  },

  data() {
    return {
      week: '',
      widgetKey: uuid(),
      mockOpen: false,
      optionsInfo: Object(),
    }
  },

  computed: {
    // 队列的滚动
    queueOption() {
      let {scrollNumber = 6, scrollStep = 1, scroll = true} = (this.optionsInfo.queueInfo);
      let waitingPatientInfos = (this.waitingPatientInfos);
      const resultArr = waitingPatientInfos.filter(item => !this.$lodash.isEmpty(item));
      return {
        hoverStop: true,
        direction: 1,                               // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][scrollStep - 1], // 数值越大速度滚动越快
        limitMoveNum: scroll && (resultArr.length >= scrollNumber) && waitingPatientInfos.length >= scrollNumber ? scrollNumber : 999999, // 开始无缝滚动的数据量 this.dataList.length
      }
    },

    // 候诊的滚动
    scrollOption() {
      let {
        scrollNumber = 15,
        scrollStep = 1,
        scroll = true,
        showRowNums = 5,
        showColNums = 3
      } = (this.optionsInfo.patientInfo);
      let waitPatientListFlatten = (this.waitPatientListFlatten);
      const resultArr = waitPatientListFlatten.filter(item => !this.$lodash.isEmpty(item));
      let total = (showRowNums * showColNums);
      return {
        direction: 1,                               // 0向下 1向上 2向左 3向右
        hoverStop: true,
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][scrollStep - 1], // 数值越大速度滚动越快
        limitMoveNum: scroll && (resultArr.length >= total) && (waitPatientListFlatten.length >= total) ? scrollNumber : 999999, // 开始无缝滚动的数据量 this.dataList.length

      }
    },

    // 左侧-候诊患者滚动
    waitPatienOption() {
      let {waitScroll = true, waitScrollNumber = 3, waitScrollStep = 1} = (this.optionsInfo?.patientInfo)
      return {
        direction: 2, // 0向下 1向上 2向左 3向右
        hoverStop: true,
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][waitScrollStep - 1], // 数值越大速度滚动越快
        limitMoveNum: waitScroll ? waitScrollNumber : 999999, // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 候诊患者数据拍平
    waitPatientListFlatten() {
      return this.$lodash.flattenDeep(this.waitingPatientSummaryInfos)
    },

    // 候诊患者队列滚动判断
    queueScroll() {
      let {scrollNumber = 6, scroll = true} = (this.optionsInfo.queueInfo);
      let waitingPatientInfos = (this.waitingPatientInfos);
      const resultArr = waitingPatientInfos.filter(item => !this.$lodash.isEmpty(item));
      console.log(scroll && (resultArr.length >= scrollNumber))
      return scroll && (resultArr.length >= scrollNumber)
    },

    // 候诊患者队列滚动判断
    patientListScroll() {
      let {scroll = false, showRowNums = 5, showColNums = 3} = (this.optionsInfo.patientInfo);
      let waitPatientListFlatten = (this.waitPatientListFlatten);
      const resultArr = waitPatientListFlatten.filter(item => !this.$lodash.isEmpty(item));
      let total = (showRowNums * showColNums);
      return scroll && (resultArr.length >= total)
    },

    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Array();
        let Obj = Object();
        switch (val) {
          case 'area':
            Reflect.set(Obj, 'height', pxToVw(info.areaHeight));
            return Obj;
          case 'list':
            Reflect.set(Obj, "background", (info.queueInfo.listBackground));
            return Obj;
          case "head":
            Reflect.set(Obj, "fontWeight", (info.queueInfo.headFontWeight));
            Reflect.set(Obj, "color", (info.queueInfo.headerColor));
            Reflect.set(Obj, "background", (info.queueInfo.headerBackground));
            Reflect.set(Obj, "fontSize", pxToVw(info.queueInfo.headerFontSize));
            return Obj;
          case "queueItem":
            Reflect.set(Obj, "fontWeight", (info.queueInfo.listFontWeight));
            Reflect.set(Obj, "color", (info.queueInfo.listColor));
            Reflect.set(Obj, "background", (info.queueInfo.listBackground));
            Reflect.set(Obj, "fontSize", pxToVw(info.queueInfo.listFontSize));
            return Obj;
          case 'patientHead':
            Reflect.set(Obj, 'fontSize', pxToVw(info?.patientInfo?.headerFontSize));
            Reflect.set(Obj, 'color', `${(info?.patientInfo?.headerColor)}`);
            Reflect.set(Obj, 'background', `${(info?.patientInfo?.headerBackground)}`);
            Reflect.set(Obj, 'fontWeight', `${(info?.patientInfo?.headerFontWeight)}`);
            return Obj;
          case 'patientList':
            Reflect.set(Obj, 'fontSize', pxToVw(info?.patientInfo?.listFontSize));
            Reflect.set(Obj, 'color', `${(info?.patientInfo?.listColor)}`);
            Reflect.set(Obj, 'fontWeight', `${(info?.patientInfo?.listFontWeight)}`);
            return Obj;
        }
      }
    },

    // 栏目是否显示
    getColShow() {
      return function (val) {
        const self = this;
        let {defaultShowCol} = (self.optionsInfo.queueInfo) || Array();
        return defaultShowCol.includes(val);
      };
    },

    // 患者的ClassName
    getClassName() {
      return function (val) {
        switch (val) {
          case "treatingPatient":
            return "current-patient";
          case "waitPatientList":
            return "wait-patient";
          case "waitPatientCount":
            return "patient-count";
          case "registerObjNames":
            return "register-name";
          case 'deptName':
            return "deptName-name";
        }
      };
    },

    // 候诊队列数据
    waitingPatientInfos() {
      let devType = (this.devType);
      let tempList;
      let {showRowNums = 5, queueInfo} = (this.optionsInfo);
      let WaitingPatientList = this.$store.getters['getWaitingPatientInfo'];
      if (devType) {
        tempList = WaitingPatientList.apiData
      } else {
        tempList = WaitingPatientList.mockData
      }
      if (queueInfo.scroll) {
        if (tempList.length > showRowNums) {
          return [...tempList];
        } else {
          let arr = (new Array(showRowNums - tempList.length).fill({}));
          return [...tempList, ...arr];
        }
      } else {
        //   不滚动
        if (tempList.length > showRowNums) {
          let sliceArr = tempList.slice(0, showRowNums)
          return [...sliceArr];
        } else {
          let arr = (new Array(showRowNums - tempList.length).fill({}));
          return [...tempList, ...arr];
        }
      }

    },

    // 保留--防止回退
    waitingPatientInfos2() {
      let devType = (this.devType);
      let tempList;
      let {showRowNums = 5, queueInfo} = (this.optionsInfo);
      let WaitingPatientList = this.$store.getters['getWaitingPatientInfo'];
      if (devType) {
        tempList = WaitingPatientList.apiData
      } else {
        tempList = WaitingPatientList.mockData
      }
      if (queueInfo.scroll) {
        if (tempList.length > showRowNums) {
          let sliceArr = tempList.slice(0, showRowNums)
          return [...sliceArr];
        } else {
          if (tempList.length > 5) {
            let sliceArr = tempList.slice(0, showRowNums)
            return [...sliceArr];
          } else {
            let arr = (new Array(5 - tempList.length).fill({}));
            return [...tempList, ...arr];
          }
        }
      } else {
        //   不滚动
        console.log(showRowNums)
        if (tempList.length > showRowNums) {
          let sliceArr = tempList.slice(0, showRowNums)
          return [...sliceArr];
        } else {
          let arr = (new Array(showRowNums - tempList.length).fill({}));
          return [...tempList, ...arr];
        }
      }

    },

    //等待就这的患者
    waitingPatientSummaryInfos() {
      let devType = (this.devType);
      let {patientInfo} = (this.optionsInfo);
      let WaitingPatientList = this.$store.getters['getWaitingPatienttAllInfo'];
      let tempList = Array();
      if (devType) {
        tempList = (WaitingPatientList.apiData);
      } else {
        tempList = (WaitingPatientList.mockData);
      }
      let summary = this.$lodash.map(tempList, "waitPatientList");
      let flattenArr = this.$lodash.flattenDeep(summary);
      let uniqByArr = this.$lodash.uniqBy(flattenArr, 'queuingId');
      let patientNumber = (patientInfo.showColNums || 3) * (patientInfo.showRowNums || 5);
      // 滚动状态
      if (patientInfo.scroll) {
        if (uniqByArr?.length >= patientNumber) {
          let remainder = ((uniqByArr.length) - patientNumber) % (patientInfo.showColNums);
          if (!!remainder) {
            let number = patientInfo.showColNums - remainder > 0 ? patientInfo.showColNums - remainder : 0
            let arr = (new Array(number).fill({}));
            let flattenArr2 = [...uniqByArr, ...arr];
            return this.$lodash.chunk(flattenArr2, patientInfo.showColNums || 3)
          } else {
            let flattenArr2 = [...uniqByArr];
            return this.$lodash.chunk(flattenArr2, patientInfo.showColNums || 3)
          }
        } else {
          let arr = (new Array(patientNumber - uniqByArr?.length).fill({}));
          let flattenArr2 = [...uniqByArr, ...arr];
          return this.$lodash.chunk(flattenArr2, patientInfo.showColNums)
        }
      } else {
        // 非滚动状态--数据足够
        if (uniqByArr?.length > patientNumber) {
          let sliceArr = uniqByArr.slice(0, patientNumber);
          return this.$lodash.chunk(sliceArr, patientInfo.showColNums || 3)
        } else {
          // 非滚动状态--数据不足
          let arr = (new Array(patientNumber - uniqByArr?.length).fill({}));
          let flattenArr2 = [...uniqByArr, ...arr];
          return this.$lodash.chunk(flattenArr2, patientInfo.showColNums)
        }
      }
    },

    //保留-等待就这的患者
    waitingPatientSummaryInfos2() {
      let devType = (this.devType);
      let {patientInfo} = (this.optionsInfo);
      let WaitingPatientList = this.$store.getters['getWaitingPatienttAllInfo'];
      let tempList = Array();
      if (devType) {
        tempList = (WaitingPatientList.apiData);
      } else {
        tempList = (WaitingPatientList.mockData);
      }
      let summary = this.$lodash.map(tempList, "waitPatientList");
      let flattenArr = this.$lodash.flattenDeep(summary);
      let uniqByArr = this.$lodash.uniqBy(flattenArr, 'queuingId');
      let patientNumber = (patientInfo.showColNums || 3) * (patientInfo.showRowNums || 5);
      if (uniqByArr?.length >= patientNumber) {
        let sliceArr = uniqByArr.slice(0, patientNumber);
        return this.$lodash.chunk(sliceArr, patientInfo.showColNums || 3)
      } else {
        //补足 返回数据48  预期数据60
        if (uniqByArr?.length > 15) {
          let remainder = (uniqByArr.length) % 3
          let arr = (new Array(3 - remainder).fill({}));
          let flattenArr2 = [...uniqByArr, ...arr];
          return this.$lodash.chunk(flattenArr2, 3)
        } else {
          let arr = (new Array(15 - (uniqByArr.length)).fill({}));
          let flattenArr2 = [...uniqByArr, ...arr];
          return this.$lodash.chunk(flattenArr2, 3)
        }
      }
    },

    // 设置宽度和字号
    setFlex() {
      return function (item, val) {
        const self = this;
        let info = (self.optionsInfo) || Array();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "flex", (item.flex) || 1);
            Reflect.set(Obj, "fontWeight", (info.queueInfo.headFontWeight));
            Reflect.set(Obj, "color", (info.queueInfo.headerColor));
            Reflect.set(Obj, "background", (info.queueInfo.headerBackground));
            Reflect.set(Obj, "fontSize", pxToVw(info.queueInfo.headerFontSize));
            return Obj;
          case "list":
            Reflect.set(Obj, "flex", (item.flex) || 1);
            Reflect.set(Obj, "fontWeight", (info.queueInfo.listFontWeight));
            Reflect.set(Obj, "fontSize", pxToVw(info.queueInfo.listFontSize));
            Reflect.set(Obj, "background", (info.queueInfo.listBackground));
            Reflect.set(Obj, "color", (info.queueInfo.listColor));
            return Obj;
        }
      }
    },

    // 拼接显示具体内容
    getColContent() {
      return function (val, key) {
        return val[key] || '\u00a0'
      }
    },

    // 当前就诊的患者|| 医生暂停接诊
    getCurrentPatient() {
      return function (val) {
        /**
         * 在线状态 0在线 1暂停 2退出
         **/
        const self = this;
        let {patientOrderNo = false} = (self.optionsInfo) || Array();
        let type = parseInt(val.onlineStatus);
        switch (type) {
          case 0:
          case 2:
            if (!!(val.treatingPatient) && !!(val.treatingPatient.length)) {
              let currentPatient = Array();
              (val.treatingPatient).forEach((item) => {
                let patientOrderNoInfo = `<span class="${patientOrderNo ? 'patient-orderNo' : 'patient-orderNo2'}">${(item.orderNo) || '\u00a0'}</span>`;
                let temp = `${patientOrderNoInfo} ${(item.patientName) || '\u00a0'}`
                currentPatient.push(temp)
              })
              return (this.$lodash.join(currentPatient, ' '));
            } else {
              return '\u00a0'
            }
          case 1:
            return '暂停接诊';
        }
      }
    },

    // 获候诊的患者
    getWaitingContent() {
      return function (item) {
        const self = this;
        let {patientOrderNo = false} = (self.optionsInfo) || Array();
        let patientOrderNoInfo = `<span class="${patientOrderNo ? 'patient-orderNo' : 'patient-orderNo2'}">${(item.orderNo) || '\u00a0'}</span>`;
        let temp = `${patientOrderNoInfo} ${(item.patientName) || '\u00a0'}`;
        let temps = this.$lodash.trim(temp);
        return temps;
      }
    },

  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      console.log(key,'sdfd')
      switch (key) {
        case "patientListInfo":
          let patientList = this.$lodash.cloneDeep(data);
          buildParent.executeParentMethod('writeLog', JSON.stringify({sign: '模板-患者信息', key: key, data: data}));
          this.$store.dispatch('setWaitingPatientInfo', patientList)
          break
        case "indPatientInfo":
          let indPatientList = this.$lodash.cloneDeep(data);
          this.$store.dispatch('setWaitingPatientAllInfo', indPatientList)
          break
        case "openMsgWin":
          alert('openMsgWin',data)
          // this.openMsgWin(data)
          break
      }
    },

    // 等待候诊滚动结束
    handleScrollEnd(e, row) {
      const self = this;
      if (self.$refs[`scroll-${row.workerId}`]) {
        self.$nextTick(() => {
          self.$refs[`scroll-${row.workerId}`][0] && self.$refs[`scroll-${row.workerId}`][0].reset()
        })
      }
    },
  },

  watch: {
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = (val.options.config);
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-waiting-drugstore-patient-widget {
  color: #333;
  height: auto;
  font-size: 50px;
  overflow: hidden;

  .widget-inside {
    padding: 24px 30px 4px 30px;
    box-sizing: border-box;

    .flex-box {
      .item {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border: none;

        .header-area {
          width: 100%;
          height: 120px;
          background: rgba(0, 89, 179, 1);
          display: flex;

          .header-item {
            flex: 1;
            height: 100%;
            flex-direction: unset;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
          }
        }

        .content-area {
          display: flex;
          flex-direction: column;

          .scroll {
            overflow: hidden;
          }

          .content-item {
            background: white;
            margin-top: 8px;
            font-size: 50px;
            width: 100%;
            color: #333333;
            display: flex;
            padding: 4.5px 0;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            flex: 1;
            overflow: hidden;

            &:first-child {
              margin-top: 0;
            }

            span {
              border-radius: 12px;
              padding: 12px 20px;
              font-size: 48px;
              line-height: 52px;
              margin-top: -8px;
              display: inline-block;
              background: rgba(0, 89, 179, 0.2);
              @include singleEllipsis(calc(84%))
            }
          }
        }
      }

      .queue-area {
        border-radius: 20px !important;
        flex-basis: 40%;
        overflow: hidden;
        border: 1px rgba(170, 170, 170, 0.75) solid;
        margin-right: 20px;
        background: white;

        .header-area {
          width: 100%;
          display: flex;
          background-color: #0059b3;
          color: #fff;
          height: 120px;
          flex-shrink: 0;

          .item {
            display: flex;
            height: 100%;
            border-radius: 0 !important;
            justify-content: center;
            align-items: center;
            align-self: center;
          }

          .wait-patient {
            display: inline !important;
            align-self: center;
            align-items: center;
            text-align: center;
          }
        }

        //队列的默认样式
        .list-area {
          width: 100%;
          display: flex;
          height: auto;
          background: white;
          flex-direction: column;
          overflow: hidden;

          .item {
            color: #000000;
          }

          .treatmentRoomName-wrap-info {
            display: flex;
            height: 100%;
            min-width: 100%;
            overflow: hidden;
          }

        }

        //滚动队列的样式
        .queue-scrooll {
          width: 100%;
          display: flex;
          height: auto;
          background: white;
          flex-direction: column;
          overflow: hidden;

          .item2 {
            color: #000000;
          }

          .treatmentRoomName-wrap-info2 {
            display: flex;
            height: 100%;
            min-width: 100%;
            overflow: hidden;
          }

          .waiting-item {
            display: flex;
            width: 100%;
            align-items: center;
            align-self: center;
            flex-direction: unset;
            flex-grow: 1;
            box-sizing: border-box;
            border-bottom: 1px rgba(170, 170, 170, 0.75) solid;

            .item {
              flex: 1;
              height: 112px;
              padding: 0 18px;
              box-sizing: border-box;
              line-height: 112px;
              @include singleEllipsis(100%);
              text-align: center;
              border-right: 1px rgba(170, 170, 170, 0.75) solid;

              &:last-child {
                border-right: none;
              }

              .scrollText {
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: left;
                align-items: center;
                align-self: center;
              }

              .scroll-item-inside {
                display: flex;
                justify-content: center;
                padding-right: 14px;
                text-align: center;
              }

              .item-inside-default {
                display: flex;
                height: 100%;
                width: 100%;
                justify-content: left;

                > div {
                  display: flex;
                  width: 100% !important;
                  overflow: hidden;
                }
              }
            }

            .deptName-name,
            .patient-count {
              .item-inside-default {
                display: inline-block;
                width: 100%;
                height: 82px;
                line-height: 82px;
                border-radius: 8px;

                div {
                  display: flex;
                  flex-basis: 100%;
                  align-self: center;
                  justify-content: center;
                }
              }

              .item-inside {
                background: rgba(0, 89, 179, 0.2);
              }
            }

            .current-patient {
              display: flex;
              flex: 1.5;
              align-self: center;
              align-items: center;
              justify-content: center;

              :deep(.treating-patient-area) {
                background: transparent;

                .patient-orderNo {
                  padding: 12px;
                  display: inline-flex;
                  height: 60px;
                  text-align: center;
                  line-height: 60px;
                  justify-content: center;
                  min-width: 60px;
                  background: transparent;
                  border-radius: 12px;
                  overflow: hidden;
                  color: white;
                }
              }

              span {
                display: flex;
                line-height: normal;
                min-width: 260px;
                align-items: center;
                align-self: center;
                background: rgba(0, 89, 179, 0.2);
                border-radius: 14px;
                padding: 10px 26px;
                @include singleEllipsis(260px);
                width: 100%;
                max-width: 100%;
                height: calc(100% - 10px);
              }
            }

            .wait-patient {
              flex: 3;
              overflow: hidden;
              display: flex;
              align-self: center;
              align-items: center;
              padding-right: 8px;

              :deep(.scroll) {
                width: 100%;
                height: 80px;
                overflow: hidden;

                > div {
                  height: 100%;
                  overflow: hidden;

                  > div {
                    height: 100%;
                  }
                }

                .inside-content {
                  height: 100%;
                  display: flex;
                  align-self: center;
                  align-items: center;
                  overflow: hidden;

                  .patient {
                    height: auto;
                    align-self: center;
                    align-items: center;
                    line-height: inherit;
                    overflow: hidden;
                    padding-right: 20px;

                    .patient-orderNo {
                      padding: 12px;
                      display: inline-flex;
                      height: 60px;
                      text-align: center;
                      justify-content: center;
                      line-height: 60px;
                      background: rgba(68, 130, 192, 1);
                      border-radius: 12px;
                      min-width: 60px;
                      overflow: hidden;
                      color: white;
                    }
                  }
                }

                .patient_space {
                  margin-right: 120px;
                }
              }

              .no-scroll {
                padding-right: 20px;
                overflow: hidden;

                .inside-content {
                  height: 100%;
                  display: flex;
                  align-self: flex-start;
                  align-items: flex-start;
                  overflow: hidden;
                  text-align: left;

                  .patient {
                    height: auto;
                    align-self: center;
                    align-items: center;
                    line-height: inherit;
                    flex-basis: auto;
                    padding-right: 20px;

                    :deep(.patient-orderNo) {
                      padding: 12px;
                      display: inline-flex;
                      height: 60px;
                      text-align: center;
                      justify-content: center;
                      line-height: 60px;
                      background: rgba(68, 130, 192, 1);
                      border-radius: 12px;
                      min-width: 60px;
                      overflow: hidden;
                      color: white;
                    }
                  }
                }

                .ellipsis {
                  @include singleEllipsis(100%);
                  display: block;
                }


              }

            }

            .patient-count {
              flex: 0.8;

              .item-inside {
                @include fontWeight();
              }

              .scroll-item-inside {
                padding-right: 0;
              }
            }

            .register-name {
              flex: 1.5;
            }

            .waiting-info {
              @include singleEllipsis(100%)
            }
          }

          .waiting-item2 {
            width: 100%;
            align-self: center;
            display: flex;
            flex-grow: 1;
            flex-direction: row;
            box-sizing: border-box;
            border-bottom: 1px rgba(170, 170, 170, 0.75) solid;

            .item {
              flex: 1;
              padding: 0 18px;
              box-sizing: border-box;
              @include singleEllipsis(100%);
              text-align: center;
              border-right: 1px rgba(170, 170, 170, 0.75) solid;

              &:last-child {
                border-right: none;
              }

              .scrollText {
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: left;
                align-items: center;
                align-self: center;
              }

              .scroll-item-inside {
                display: flex;
                justify-content: center;
                padding-right: 14px;
                text-align: center;
                align-items: center;
                align-self: center;
              }

              .item-inside-default {
                display: flex;
                height: 100%;
                width: 100%;
                justify-content: left;

                > div {
                  display: flex;
                  width: 100% !important;
                  overflow: hidden;
                }
              }
            }

            .deptName-name,
            .patient-count {
              .item-inside-default {
                display: inline-block;
                width: 100%;
                height: 82px;
                line-height: 82px;
                border-radius: 8px;

                div {
                  display: flex;
                  flex-basis: 100%;
                  align-self: center;
                  justify-content: center;
                }
              }

              .item-inside {
                background: rgba(0, 89, 179, 0.2);
              }
            }

            .current-patient2 {
              display: flex;
              flex: 1.5;
              align-self: center;
              align-items: center;
              justify-content: center;

              :deep(.treating-patient-area) {
                background: transparent;

                .patient-orderNo {
                  padding: 12px;
                  display: inline-flex;
                  height: 60px;
                  text-align: center;
                  line-height: 60px;
                  justify-content: center;
                  min-width: 60px;
                  background: transparent;
                  border-radius: 12px;
                  overflow: hidden;
                  color: white;
                }
              }

              span {
                display: flex;
                line-height: normal;
                min-width: 260px;
                align-items: center;
                align-self: center;
                background: rgba(0, 89, 179, 0.2);
                border-radius: 14px;
                padding: 10px 26px;
                @include singleEllipsis(260px);
                width: 100%;
                max-width: 100%;
                height: calc(100% - 10px);
              }
            }

            .wait-patient {
              flex: 3;
              overflow: hidden;
              display: flex;
              align-self: center;
              align-items: center;
              padding-right: 8px;

              :deep(.scroll) {
                width: 100%;
                height: 80px;
                overflow: hidden;

                > div {
                  height: 100%;
                  overflow: hidden;

                  > div {
                    height: 100%;
                  }
                }

                .inside-content {
                  height: 100%;
                  display: flex;
                  align-self: center;
                  align-items: center;
                  overflow: hidden;

                  .patient {
                    height: auto;
                    align-self: center;
                    align-items: center;
                    line-height: inherit;
                    overflow: hidden;
                    padding-right: 20px;

                    .patient-orderNo {
                      padding: 12px;
                      display: inline-flex;
                      height: 60px;
                      text-align: center;
                      justify-content: center;
                      line-height: 60px;
                      background: rgba(68, 130, 192, 1);
                      border-radius: 12px;
                      min-width: 60px;
                      overflow: hidden;
                      color: white;
                    }
                  }
                }

                .patient_space {
                  margin-right: 120px;
                }
              }

              .no-scroll {
                padding-right: 20px;
                overflow: hidden;

                .inside-content {
                  height: 100%;
                  display: flex;
                  align-self: flex-start;
                  align-items: flex-start;
                  overflow: hidden;
                  text-align: left;

                  .patient {
                    height: auto;
                    align-self: center;
                    align-items: center;
                    line-height: inherit;
                    flex-basis: auto;
                    padding-right: 20px;

                    :deep(.patient-orderNo) {
                      padding: 12px;
                      display: inline-flex;
                      height: 60px;
                      text-align: center;
                      justify-content: center;
                      line-height: 60px;
                      background: rgba(68, 130, 192, 1);
                      border-radius: 12px;
                      min-width: 60px;
                      overflow: hidden;
                      color: white;
                    }
                  }
                }

                .ellipsis {
                  @include singleEllipsis(100%);
                  display: block;
                }


              }

            }

            .patient-count {
              flex: 0.8;

              .item-inside {
                @include fontWeight();
              }

              .scroll-item-inside {
                padding-right: 0;
              }
            }

            .register-name {
              flex: 1.5;
            }

            .waiting-info {
              @include singleEllipsis(100%)
            }
          }
        }

        //非滚动
        .queue-no-scrooll {
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          flex-shrink: 0;
          background: rgb(0, 89, 179);

          .waiting-item {
            width: 100%;
            align-self: center;
            display: flex;
            flex-grow: 1;
            flex-direction: row;
            box-sizing: border-box;
            border-bottom: 1px rgba(170, 170, 170, 0.75) solid;

            .item {
              flex: 1;
              padding: 0 18px;
              box-sizing: border-box;
              @include singleEllipsis(100%);
              text-align: center;
              border-right: 1px rgba(170, 170, 170, 0.75) solid;

              &:last-child {
                border-right: none;
              }

              .scrollText {
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: left;
                align-items: center;
                align-self: center;
              }

              .scroll-item-inside {
                display: flex;
                justify-content: center;
                padding-right: 14px;
                text-align: center;
                align-items: center;
                align-self: center;
              }

              .item-inside-default {
                display: flex;
                height: 100%;
                width: 100%;
                justify-content: left;

                > div {
                  display: flex;
                  width: 100% !important;
                  overflow: hidden;
                }
              }
            }

            .deptName-name,
            .patient-count {
              .item-inside-default {
                display: inline-block;
                width: 100%;
                height: 82px;
                line-height: 82px;
                border-radius: 8px;

                div {
                  display: flex;
                  flex-basis: 100%;
                  align-self: center;
                  justify-content: center;
                }
              }

              .item-inside {
                background: rgba(0, 89, 179, 0.2);
              }
            }

            .current-patient2 {
              display: flex;
              flex: 1.5;
              align-self: center;
              align-items: center;
              justify-content: center;

              :deep(.treating-patient-area) {
                background: transparent;

                .patient-orderNo {
                  padding: 12px;
                  display: inline-flex;
                  height: 60px;
                  text-align: center;
                  line-height: 60px;
                  justify-content: center;
                  min-width: 60px;
                  background: transparent;
                  border-radius: 12px;
                  overflow: hidden;
                  color: white;
                }
              }

              span {
                display: flex;
                line-height: normal;
                min-width: 260px;
                align-items: center;
                align-self: center;
                background: rgba(0, 89, 179, 0.2);
                border-radius: 14px;
                padding: 10px 26px;
                @include singleEllipsis(260px);
                width: 100%;
                max-width: 100%;
                height: calc(100% - 10px);
              }
            }

            .wait-patient {
              flex: 3;
              overflow: hidden;
              display: flex;
              align-self: center;
              align-items: center;
              padding-right: 8px;

              :deep(.scroll) {
                width: 100%;
                height: 80px;
                overflow: hidden;

                > div {
                  height: 100%;
                  overflow: hidden;

                  > div {
                    height: 100%;
                  }
                }

                .inside-content {
                  height: 100%;
                  display: flex;
                  align-self: center;
                  align-items: center;
                  overflow: hidden;

                  .patient {
                    height: auto;
                    align-self: center;
                    align-items: center;
                    line-height: inherit;
                    overflow: hidden;
                    padding-right: 20px;

                    .patient-orderNo {
                      padding: 12px;
                      display: inline-flex;
                      height: 60px;
                      text-align: center;
                      justify-content: center;
                      line-height: 60px;
                      background: rgba(68, 130, 192, 1);
                      border-radius: 12px;
                      min-width: 60px;
                      overflow: hidden;
                      color: white;
                    }
                  }
                }

                .patient_space {
                  margin-right: 120px;
                }
              }

              .no-scroll {
                padding-right: 20px;
                overflow: hidden;

                .inside-content {
                  height: 100%;
                  display: flex;
                  align-self: flex-start;
                  align-items: flex-start;
                  overflow: hidden;
                  text-align: left;

                  .patient {
                    height: auto;
                    align-self: center;
                    align-items: center;
                    line-height: inherit;
                    flex-basis: auto;
                    padding-right: 20px;

                    :deep(.patient-orderNo) {
                      padding: 12px;
                      display: inline-flex;
                      height: 60px;
                      text-align: center;
                      justify-content: center;
                      line-height: 60px;
                      background: rgba(68, 130, 192, 1);
                      border-radius: 12px;
                      min-width: 60px;
                      overflow: hidden;
                      color: white;
                    }
                  }
                }

                .ellipsis {
                  @include singleEllipsis(100%);
                  display: block;
                }


              }

            }

            .patient-count {
              flex: 0.8;

              .item-inside {
                @include fontWeight();
              }

              .scroll-item-inside {
                padding-right: 0;
              }
            }

            .register-name {
              flex: 1.5;
            }

            .waiting-info {
              @include singleEllipsis(100%)
            }
          }

        }
      }

      .wait-area {
        flex-basis: calc(100% - 40% - 20px);
        border-radius: 12px;
        overflow: hidden;

        .header-area {
          min-height: 120px;
          flex-basis: 120px;
          border-bottom: 2px rgba(0, 0, 0, 0.1) solid;

          .header-item {
            height: 100%;
          }
        }

        .content-area2 {
          display: flex;
          min-height: calc(100% - 120px);
          box-sizing: border-box;

          :deep(.scroll) {
            height: 100%;
          }

          .wait-patient-wrap {
            //height: 100%;
            display: flex;
            flex-direction: column;

            .content-wait-patient {
              display: flex;
              flex-direction: row;
              width: 100%;
              min-height: 112px;

              .chunk-item {
                min-width: calc(100% / 3);
                height: 100%;
                box-sizing: border-box;
                float: left;
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: center;

                &:nth-child(2n) {
                  border-left: 2px rgba(0, 0, 0, 0.1) solid;
                  border-right: 2px rgba(0, 0, 0, 0.1) solid;
                }
              }

              &:nth-child(2n) {
                background: rgba(248, 248, 248, 1);
              }
            }
          }

        }

        .content-area {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          overflow: hidden;
          height: calc(100% - 120px);

          .scroll {
            width: 100%;
          }

          .scroll-inside {
            display: flex;
            width: 100%;
            height: calc(100%);
            flex-direction: column;
            overflow: hidden;

            .group-info {
              width: 100%;
              overflow: hidden;
              display: inline-flex;

              &:nth-child(2n) {
                background: rgba(248, 248, 248, 1);
              }

              .patient-item {
                align-self: center;
                flex: 1;
                flex-shrink: 0;
                overflow: hidden;
                white-space: nowrap;
                min-height: 112px;
                display: flex;
                align-items: center;
                justify-content: center;

                &:nth-child(2n) {
                  border-left: 2px rgba(0, 0, 0, 0.1) solid;
                  border-right: 2px rgba(0, 0, 0, 0.1) solid;
                }
              }
            }
          }
        }

      }
    }
  }
}
</style>
